<template>
    <div class="table">
        <div id="table1"></div>
        <div id="table2"></div>
        <div id="table3"></div>
        <div id="table4"></div>
    </div>
    <div class="chat">
        <!-- <div class="chat-input">
            <el-input v-model="input" style="width: 240px" placeholder="请输入" />
            <el-button @click="send">发送</el-button>
        </div> -->
        <div class="chat-list">
            <div v-for="item in charList">
                {{ item.name }}：
                <el-tag >{{ item.content }}</el-tag>
            </div>
            

        </div>



    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';

import { ref } from 'vue'
const input = ref('')

const charList = ref([
    {
        name: '小李',
        content: '123123123'
    },
    {
        name: '小李',
        content: '测445645656456试'
    },
    {
        name: '小李',
        content: '737378353'
    },
    {
        name: '小李',
        content: '4758345343547583'
    },
    
])

onMounted(() => {
    getcharts1();
    getcharts2();
    getcharts3();
    getcharts4();
})

// function send(){
//     charList.value.unshift({name:"小王",content:input.value})
//     input.value = ''
// }

function getcharts1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('table1'));

    // 柱状图配置
    var option = {
        title: {
            text: '柱状图示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function getcharts2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('table2'));

    // 折线图配置
    var option = {
        title: {
            text: '折线图示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '销量',
                type: 'line',
                data: [150, 230, 224, 218, 135, 147, 260]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function getcharts3() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('table3'));

    // 饼图配置
    var option = {
        title: {
            text: '饼图示例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '搜索引擎' },
                    { value: 735, name: '直接访问' },
                    { value: 580, name: '邮件营销' },
                    { value: 484, name: '联盟广告' },
                    { value: 300, name: '视频广告' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

function getcharts4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('table4'));

    // 散点图配置
    var option = {
        title: {
            text: '散点图示例'
        },
        tooltip: {},
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '散点',
                type: 'scatter',
                data: [
                    [10, 8],
                    [23, 15],
                    [14, 6],
                    [35, 28],
                    [27, 18],
                    [18, 12],
                    [13, 15]
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

</script>

<style scoped lang="scss">
.table {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    div {
        width: 48%;
        height: 500px;
        margin: 10px;
        border: {
            style: solid;
            width: 3px;
            color: rgb(89, 17, 117);
            radius: 10px;
        }
    }
}

.chat {
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: column;

    .chat-input {
        display: flex;

        .el-input {}

        .el-button {
            
            
            
        }
    }

    .chat-list{
        width: 95%;
        height: 400px;
        margin-bottom: 20px;
        color: white;
        border: {
            style: solid;
            width: 3px;
            color: rgb(89, 17, 117);
            radius: 10px;
        }
        font-size: 30px;
        .el-tag{
            margin: 10px;
            height: 50px;
            font-size: 20px;
        }
    }


}
</style>
